<template>
  <div class="hot">
    <!-- 轮播图 -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./../imgs/rowing/s1.png" alt="" width="100%"></div>
        <div class="swiper-slide"><img src="./../imgs/rowing/s2.png" alt="" width="100%"></div>
        <div class="swiper-slide"><img src="./../imgs/rowing/s3.png" alt="" width="100%"></div>
        <div class="swiper-slide"><img src="./../imgs/rowing/s4.png" alt="" width="100%"></div>
        <div class="swiper-slide"><img src="./../imgs/rowing/s5.png" alt="" width="100%"></div>
        <div class="swiper-slide"><img src="./../imgs/rowing/s6.png" alt="" width="100%"></div>
        <div class="swiper-slide"><img src="./../imgs/rowing/s7.png" alt="" width="100%"></div>

    </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
  </div>
 <!--  //中间导航 -->
  <hot-nav/>
  <!-- 广告位 -->
  <div class="hot-ad">
    <img src="./../imgs/hot_ad/home_ad.gif" alt="" width="100%">
  </div>
  <!-- 商品列表 -->
  <hot-shop-list/>
  </div>
</template>

<script type="text/ecmascript-6">
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
import HotNav from "./Hot/HotNav";  
import HotShopList from "./Hot/HotShopList";
export default {
    name:'Hot',
    mounted(){
      this.$store.dispatch('reqHomeCasual');

    //创建swiper实例
    new Swiper ('.swiper-container', {
    autoplay:true,//自动播放
    loop: true, // 循环模式选项
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    })        
    },
  data() {
    return {

    }
  },
  components: {
    HotNav,
    HotShopList,
  }
}
</script>

<style scoped lang="stylus">
.hot
    width 100%
    height 100%
    background-color #f5f5f5
    padding-top 54px
    .hot-ad
      background-color #fff
      margin 8px 0
      padding 5px
    
</style>
